<template>
  <el-dialog v-model="dialogVisible" title="修改密码" width="500px" draggable>
    <el-form class="password" ref="formRef" :model="form" :rules="rules">
      <el-form-item label="原密码" prop="oldPassword">
        <el-input placeholder="请输入原密码" type="password" v-model="form.oldPassword"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input placeholder="请输入新密码" type="password" v-model="form.newPassword"></el-input>
      </el-form-item>
      <el-form-item label="验证码" class="captchaWrap" prop="captcha">
        <el-input
          class="captchaText"
          type="text"
          v-model="form.captcha"
          placeholder="请输入验证码,点击图片刷新验证码"
          style="flex: 1"
        >
        </el-input>
        <el-image class="captchaImg" :src="captchaImg" @click="getCaptchaData"></el-image>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button :loading="loading" type="primary" @click="_submit">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from "vue";
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
import { VITE_API_URL } from "@/config";
import { convertImageToBase64 } from "@/utils";
import { modifyPsdApi } from "@/api/modules/login";
import JSEncrypt from "jsencrypt";
const dialogVisible = ref(false);
const loading = ref(false);

const captchaImg = ref("");
const form = ref({ oldPassword: "", newPassword: "", captcha: "" });
const formRef = ref<FormInstance>();
const rules = reactive({
  oldPassword: [
    {
      required: true,
      message: "原密码不能为空",
      trigger: "blur"
    }
    // {
    //   //插入正则验证：大小写、数字、至少6位、不常用字符
    //   pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()\-_=+{};:,<.>])[a-zA-Z][a-zA-Z0-9!@#$%^&*()\-_=+{};:,<.>]{5,17}$/,
    //   message: "密码6-18位(以字母开头，同时包含大写字母、小写字母、数字以及?=.*[!@#$%^&*()\-_=+{};:,<.>]特殊字符)",
    //   trigger: "blur"
    // }
  ],
  newPassword: [
    {
      required: true,
      message: "新密码不能为空",
      trigger: "blur"
    },
    {
      //插入正则验证：大小写、数字、至少6位、不常用字符
      pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()\-_=+{};:,<.>])[a-zA-Z][a-zA-Z0-9!@#$%^&*()\-_=+{};:,<.>]{5,17}$/,
      message: "密码6-18位(以字母开头，同时包含大写字母、小写字母、数字以及?=.*[!@#$%^&*()\-_=+{};:,<.>]特殊字符)",
      trigger: "blur"
    }
  ],
  captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }]
});
const openDialog = () => {
  dialogVisible.value = true;
  nextTick(() => {
    formRef.value.resetFields();
  });
  form.value = { oldPassword: "", newPassword: "", captcha: "" };
  getCaptchaData();
};

const getCaptchaData = async () => {
  try {
    convertImageToBase64(`${VITE_API_URL}/auth/captcha`, (base64Value: string) => {
      captchaImg.value = base64Value;
    });
  } catch (error) {
    console.log(error);
  }
};
/**
 * 提交修改信息
 */
const _submit = async (): Promise<void> => {
  formRef.value!.validate(async valid => {
    if (!valid) return;
    loading.value = true;
    const encryptor = new JSEncrypt();
    encryptor.setPublicKey(import.meta.env.VITE_PUBLIC_kEY);
    const oldPassword = encryptor.encrypt(form.value.oldPassword) as string;
    const newPassword = encryptor.encrypt(form.value.newPassword) as string;
    try {
      await modifyPsdApi({
        oldPassword,
        newPassword,
        captcha: form.value.captcha
      });
      ElMessage.success("密码修改成功");
      loading.value = false;
      dialogVisible.value = false;
    } catch (error) {
      loading.value = false;
      getCaptchaData();
    }
  });
};
defineExpose({ openDialog });
</script>
<style lang="scss" scoped>
.password .el-form-item {
  margin-bottom: 30px;
}
.captchaWrap {
  display: flex;
  align-items: center;
  .captchaText {
    flex: 1;
    margin-right: 12px;
  }
}
.captchaImg {
  cursor: pointer;
}
</style>
